<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab切换</title>
	<style>
		div,span{padding: 0;margin: 0;border: 0;outline: 0;box-sizing: border-box;}
		.navBar{height: 50px;line-height: 50px;}
		.navBar span{display:inline-block;float: left;width: 33.33%;text-align: center;}
		.navBar .article{border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
		.navBar .on{border-bottom: 2px solid #e00;}

		.content{height: 400px;position: relative;}
		.content div{position: absolute;height: 100%;width:100%;line-height: 400px;text-align: center;color: #ccc;font-size: 36px;display: none;}
		.content div.on{display: block;}
	</style>
</head>
<body>
	<div class="navBar" id="navBar">
		<span class="home on" id="home">Home</span>
		<span class="article" id="article">Article</span>
		<span class="aboutme" id="aboutme">Aboutme</span>
	</div>

	<div class="content">
		<div class="home on">home</div>
		<div class="article">article</div>
		<div class="aboutme">aboutme</div>
	</div>

	<script>
		document.getElementById('navBar').addEventListener('click', function(ev){
			//console.dir(ev);
			
			var navBarSpan = document.querySelectorAll('.navBar span'); // 取得navBar中的三个span
			for(var i = 0 ; i < navBarSpan.length; i++){//将所有span元素上的on类除掉
				navBarSpan[i].classList.remove('on');
			}
			ev.target.classList.add('on');//给当前点击的类加上on类



			var contentDiv = document.querySelectorAll('.content div');//取得content下面的三个div
			console.dir(contentDiv);
			for(var i = 0 ;i < contentDiv.length;i++){ //将所有div隐藏 display = 'none'
				contentDiv[i].style.display = 'none';
			}
			document.querySelector('.content .' + ev.target.id).style.display = 'block'; //当前点击的div显示 display = 'block'
		})
	</script>
</body>
</html>